<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" >
/*需求 
    自定义组件  功能 
    1 显示h2标签初始文本为  我喜欢你
    2 点击后显示h2 替换为   你喜欢我  
*/

//1 定义组件 
    class Like extends React.Component{
        constructor(props){    
            super(props)
            this.state = {   //11初始状态 
                show:false
            }
            // console.log(props)
            console.log(<Like/>)
                             //将新增的方法中的this强制绑定为组件对象 
            this.handleClick = this.handleClick.bind(this)
        }

                           //新添加一个方法 内部this默认不是组件对象 而是undefined
        handleClick () {   //33更新状态 在组件内class
                //得到状态 取反 
                const show = !this.state.show
                this.setState({show})
            }

        //重写组件类的方法         
        render(){
                             //22读取状态值 
            const {show} = this.state
            return <h2 onClick={this.handleClick}> {show?"你喜欢我":"我喜欢你"} </h2>
        }
    }
                //state是组件对象最重要的属性 值是对象(可以包含多个数据)
                //组件又被称为状态机 通过 更改组件的state 来更新对应的页面显示(重新渲染组件)

//2 渲染组件标签 
    ReactDOM.render(<Like/>,document.getElementById("root"))
    
/*
                       //这里面的this都是指的组件对象 
constructor(props) {   //1 状态初始值     constructor(props){super(props)} 这一步是写死固定的 调父类
    super(props);                           
    this.state = {
        counter: 0
        sum: 0
    }
}
                       //2 读取某个状态 
this.state.XXXName 
                       //3 变更状态(一但变更状态组件自动 界面更新 重新渲染)       
this.setState({        //一个方法this.setState 
     counter: 0
        sum: 0
})            

事件绑定中的this ？
    *在类中直接定义一个函数 并且将这个函数 绑定到html原生的onClick事件上 当前这个函数的this指向的是谁？
    -默认情况undefined  奇怪吧 居然时undefined
    -因为正常的dom操作中 监听点击 监听函数中的this其实时 节点对象 (比如说button对象  .前面的)
    -因为React并不是直接渲染成真实的dom 我们所编写的button 只是一个语法糖 它的本质React的Element对象 
    -那么数据发生监听后 react给我们的函数绑定的this 默认情况时undefined  

组件数据管理 
state 和 prop区别？
                state由用户自己定义，他是一个js普通对象 
                props 是不可变_修改的，而 state 可以根据与用户交互来改变。
                props 是传递给组件的(类似函数的形参)，而state是组件内被组件自己管理的(类似在一个函数内声明的变量)。
                这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
                React元素会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。

组件有两个很重要的属性props 和 state。
	组件使用外部数据 this.props
	组件维护内部数据 this.state 和 this.setState()
	组件的props属性是只读的，它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流。即组件不能修改自身的props。
	组件的state属性是私有的，并且完全受控于当前组件。随用户操作、网络响应或者其他变化而需要动态更新UI的可以通过更新其state来实现。
	修改this.state需要通过this.setState()方法，不要直接修改this.state

    state是在组件中创建的，一般在consttructor中初始化stat,
	state是多变的，可以修改，每次setState都是异步更新的。
	state的更新会被合并
	当组件的状态发生变化时，组件会再次调用render()方法重新渲染。    

*/



</script>